<template>
  <div>
    <div class="list">
      <ShopCart v-for="item in goodsList" :key="item.id" :obj="item" />
    </div>
    <div class="total">
      <div>
        合计：<span class="amount">{{ total }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import ShopCart from "./components/02-ShopCart";
export default {
  data() {
    return {
      goodsList: [
        {
          id: "4001172",
          name: "称心如意手摇咖啡磨豆机咖啡豆研磨机",
          price: 289.9,
          picture:
            "https://yanxuan-item.nosdn.127.net/84a59ff9c58a77032564e61f716846d6.jpg",
          count: 2,
          spec: { color: "白色" },
          gift: "单身狗,舔狗,一波狗粮",
        },
        {
          id: "4001009",
          name: "竹制干泡茶盘正方形沥水茶台品茶盘",
          price: 109.8,
          picture:
            "https://yanxuan-item.nosdn.127.net/2d942d6bc94f1e230763e1a5a3b379e1.png",
          count: 3,
          spec: { size: "40cm*40cm", color: "黑色" },
        },
        {
          id: "4001874",
          name: "古法温酒汝瓷酒具套装白酒杯莲花温酒器",
          price: 488,
          picture:
            "https://yanxuan-item.nosdn.127.net/44e51622800e4fceb6bee8e616da85fd.png",
          count: 1,
          spec: { color: "青色", sum: "一大四小" },
        },
        {
          id: "4001649",
          name: "大师监制龙泉青瓷茶叶罐",
          price: 139,
          picture:
            "https://yanxuan-item.nosdn.127.net/4356c9fc150753775fe56b465314f1eb.png",
          count: 1,
          spec: { size: "小号", color: "紫色" },
          gift: "50g茶叶,清洗球,一个球",
        },
      ],
    };
  },
  components: {
    ShopCart,
  },
  computed: {
    total() {
      return (
        this.goodsList.reduce((sum, { price, count }) => {
          sum += price * 10 * count;
          return sum;
        }, 0) / 10
      );
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.list {
  width: 990px;
  margin: 100px auto 0;
}

.item {
  padding: 15px;
  transition: all 0.5s;
  display: flex;
  border-top: 1px solid #e4e4e4;
}

.item:nth-child(4n) {
  margin-left: 0;
}

.item:hover {
  cursor: pointer;
  background-color: #f5f5f5;
}

.item img {
  width: 80px;
  height: 80px;
  margin-right: 10px;
}

.item .name {
  font-size: 18px;
  margin-right: 10px;
  color: #333;
  flex: 2;
}

.item .name .tag {
  display: block;
  padding: 2px;
  font-size: 12px;
  color: #999;
}

.item .price,
.item .sub-total {
  font-size: 18px;
  color: firebrick;
  flex: 1;
}

.item .price::before,
.item .sub-total::before,
.amount::before {
  content: "¥";
  font-size: 12px;
}

.item .spec {
  flex: 2;
  color: #888;
  font-size: 14px;
}

.item .count {
  flex: 1;
  color: #aaa;
}

.total {
  width: 990px;
  margin: 0 auto;
  display: flex;
  justify-content: flex-end;
  border-top: 1px solid #e4e4e4;
  padding: 20px;
}

.total .amount {
  font-size: 18px;
  color: firebrick;
  font-weight: bold;
  margin-right: 50px;
}
</style>